import { Drawer, Row, Col, Loading, Space } from 'tdesign-react'

import styles from './index.module.less'

const MailDetailDrawer = (props: any) => {

  const {
    visible,
    orderInfo = {},
    onClose,
  } = props

  return <Drawer
    className={styles.mailDetailDrawer}
    visible={visible}
    size={'60%'}
    header={null}
    closeBtn={null}
    closeOnOverlayClick={true}
    onOverlayClick={onClose}
    onClose={onClose}
    onConfirm={onClose}
    // showOverlay={false}
  >
    <Loading
      text="正在获取信息..."
      loading={!orderInfo.mailHistoryList}
      size="large"
      style={{width: '100%', height: '100%'}}
    >
      <Row style={{paddingBottom: 16, paddingTop: 16}}>
        <Col span={1} className={styles.title}>
          邮箱地址：
        </Col>
        <Col span={11} className={styles.value}>
          {orderInfo.fromMail}
        </Col>
      </Row>
      <Space style={{ width: '100%' }} direction='vertical'>
        {orderInfo.mailHistoryList && orderInfo.mailHistoryList.map((item: any, index: number) => {
          return <Row>
            <Col span={5} className={styles.title}>发送人：{item.fromUserName}</Col>
            <Col span={3} className={styles.title}>发送时间：{item.receivedTime}</Col>
            <Col span={12}>
              <div className={styles.htmlContent} dangerouslySetInnerHTML={{ __html: (!~item.fromMail.indexOf('support@') || index === 0) ? item.mailInfo : item.originalMailInfo }}></div>
            </Col>
          </Row>
        })}
        <p></p>
      </Space>
    </Loading>
  </Drawer>
}

export default MailDetailDrawer
